<template>
	<!-- 编辑信息 -->
	<view class="editInfo">
		<!-- @click="avatarUpload" -->
		<view class="editInfo-row">
			<view class="editInfo-row__label"> 头像 </view>
			<view class="editInfo-row__val avatar">
				<!-- <image
          :src="info.headavatar"
          mode="aspectFit"
          class="avatar-img"
        ></image> -->
				<button open-type="chooseAvatar" @chooseavatar="setAvatar">
					<u-avatar size="70" :src="headavatar || 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'"></u-avatar>
				</button>

			</view>
		</view>
		<view class="editInfo-row">
			<view class="editInfo-row__label"> 用户名 </view>
			<view class="editInfo-row__val name">
				 <!-- @confirm="inputConfirm" -->
				<input class="name-input" v-model="info.name" type="nickname"
					@change="setNickname" />
				<image :src="`${STATIC_URL}/editInfo-arrow.png`" mode="aspectFit" class="arrow"></image>
			</view>
		</view>
		<view class="editInfo-row">
			<view class="editInfo-row__label"> 姓名 </view>
			<view class="editInfo-row__val name">
				<input class="name-input" v-model="info.auth_name" @confirm="submit" />
				<image :src="`${STATIC_URL}/editInfo-arrow.png`" mode="aspectFit" class="arrow"></image>
			</view>
		</view>
		<view class="editInfo-row" @click.stop="genderState = true">
			<view class="editInfo-row__label"> 性别 </view>
			<view class="editInfo-row__val gender">
				<text>{{ info.sex == 1 ? "男" : "女" || "未选择" }}</text>
				<image :src="`${STATIC_URL}/editInfo-arrow.png`" mode="aspectFit" class="arrow"></image>
			</view>
		</view>
		<view class="editInfo-row" @click.stop="openCode">
			<view class="editInfo-row__label"> 我的二维码 </view>
			<image :src="info.qr_code" mode="aspectFit" class="qr-code"></image>
			<!-- <u-icon name="grid" class="qr-code" size="47" color="#999999"></u-icon> -->
		</view>
		<view class="editInfo-row" @click.stop="openSelectCity">
			<view class="editInfo-row__label"> 所在城市 </view>
			<view class="editInfo-row__val gender">
				<text>{{ info.city}}</text>
				<image :src="`${STATIC_URL}/editInfo-arrow.png`" mode="aspectFit" class="arrow"></image>
			</view>
		</view>
		<view class="editInfo-row">
			<view class="editInfo-row__label"> 联系电话 </view>
			<view class="editInfo-row__val name">
				<input class="name-input" v-model="info.mobile" @confirm="submit" />
				<image :src="`${STATIC_URL}/editInfo-arrow.png`" mode="aspectFit" class="arrow"></image>
			</view>
		</view>
		<u-select v-model="genderState" :list="list" @confirm="genderConfirm"></u-select>
		<simple-address ref="address" @onConfirm="setCity"></simple-address>
		<codePopup :value.sync="showCode" :src="codeSrc">
			<view slot="bottom" class="refresh" @click="refreshInfo">
				<u-icon name="clock"></u-icon>
				<text>更新会员码(每60秒自动更新)</text>
			</view>
		</codePopup>
		<!-- <view class="flex flex-jc-c editInfo-row" style="margin-top: 20rpx;" @click="logout">
			<view>退出当前账号</view>
		</view> -->
		<view class="buttonConfirm flex flex-jc-c" @click="updateUserInfo">
			<view class="text">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoEdit
	} from "@/utils/api.js";
	import {
		upload,
		uploadFile,
		uploadStore
	} from "@/utils/upload.js";
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import simpleAddress from '@/components/simple-address/simple-address.vue'
	import codePopup from "@/components/code-popup.vue"
	export default {
		computed: {
			...mapGetters(["userInfo"]),
		},
		data() {
			return {
				info: {
					name: "用户名",
					headavatar: "",
					sex: "",
					auth_name: "",
					mobile: "",
					city: '',
					qr_code: ''
				},
				name: "用户名",
				headavatar: "",
				genderState: false,
				list: [{
						value: "1",
						label: "男",
					},
					{
						value: "2",
						label: "女",
					},
				],
				showCode: false,
				codeSrc: ""
			};
		},
		components: {
			simpleAddress,
			codePopup
		},
		onLoad() {
			this.mergeForm()
		},
		methods: {
			...mapActions(["setUserInfo","clearUserInfo"]),
			async updateUserInfo(){
				try{
					const { qr_code, ...i } = this.info
					const res = await userInfoEdit(this.info)
					if(res.code === 200) {
						this.showToast(res.msg,() => {
							setTimeout(()=>{
								this.setUserInfo()
							},1000)
						})
						
					}else {
						this.showToast(res.msg)
					}
				}catch(e){
					if(e.code === 0){
						this.showToast('暂无更新')
					}else {
						this.showToast('保存失败')
					}
					
				}
			},
			showToast(msg,success = () => {}){
				uni.showToast({
					title: msg,
					icon: 'none',
					success: success
				})
			},
			logout() {
				uni.showLoading();
				uni.removeStorageSync("token");
				this.clearUserInfo().then(() => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: "已成功退出",
						success: () => {
							setTimeout(()=> {
								uni.reLaunch({
									url: '/pages/mine/login/login'
								})
							},500)
						},
					});
				});
			},

			openSelectCity() {
				this.$refs.address.open()
			},
			setCity(data) {
				let tmpArr = data.label.split('-')
				let city = tmpArr[1] === '市辖区' ? tmpArr[0] : tmpArr[1]
				this.info.city = city
			},
			mergeForm() {
				for (var key in this.info) {
					this.info[key] = this.userInfo[key]
				}
				this.headavatar = this.info.headavatar
			},
			async refreshInfo() {
				await this.setUserInfo()
				this.codeSrc = this.info.qr_code
				this.$utils.success('更新成功')
			},
			genderConfirm(result) {
				var that = this;
				const {
					label,
					value
				} = result[0];
				this.info.sex = value
			},
			async setAvatar(data) {
				let avatar = data.detail.avatarUrl
				// 上传文件
				uploadFile(avatar).then((resp) => {
					let url = resp.data.url
					const {
						name,
						sex
					} = this.info;
					this.info.headavatar = url
					this.headavatar = avatar
				});
			},
			// 查看二维码
			openCode() {
				this.codeSrc = this.info.qr_code
				this.showCode = true
			},
			setNickname(data) {
				if (this.info.name == data.detail.value) return
				this.info.name = data.detail.value
			},
		},
	};
</script>
<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss">
	.flex-jc-c{
		justify-content: center !important;
	}
	.buttonConfirm {
		width: 100%;
		padding: 50rpx 70rpx;
		.text {
			width: 100%;
			height: 80rpx;
			background: rgb(203,113,43);
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
	.editInfo {
		width: 100%;
		box-sizing: border-box;
		
		
		&-row {
			padding: 0 30rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			@include border;
			font-size: 30rpx;
			font-weight: 500;
			background: #FFFFFF;
			&__label {
				font-size: 28rpx;
				color: #666666;
			}
			&__val {
				color: $color-AA;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;

				.arrow {
					margin-left: 10rpx;
					width: 10rpx;
				}
			}

			.avatar {
				display: flex;
				align-items: center;
				&-img {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-right: 25rpx;
				}

				&-arrow {
					width: 9rpx;
					height: 18rpx;
				}
			}

			.name {
				width: calc(100% - 150rpx);

				&-input {
					text-align: right;
					width: 100%;
				}
			}

			.gender {}
		}
	}

	.refresh {
		@extend .flex-center;
		margin-bottom: 62rpx;
		color: $primary-color;
		font-size: 24rpx;
	}

	.qr-code {
		width: 47rpx;
		height: 47rpx;
	}
</style>